<template>
	<view class="my-order-page">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
		<view class="tab">
			<u-tabs :current="tabCurrentIndex" :list="tabList" @change="changeTab" lineWidth="20" lineColor="#fce849"
				:activeStyle="{
				        color:'black',
				        fontWeight: 'bold'
				    }" :inactiveStyle="{
				        color:'black'
				    }" itemStyle="padding-left: 14px; padding-right: 14px; height: 50px;"></u-tabs>
		</view>
		<view class="main">
			<view class="orderList">
				<view class="orderList-item" v-for="(item,index) in orderList" :key="index" @click="xiangqings(index)">
					<view class="header">
						<view class="shop">
							<view class="shopIcon" :style="{ backgroundImage: 'url(' + item.logo + ')' }"></view>
							<view class="shopText">
								{{item.orderInfo.shops.name}}
							</view>
							<view class="right">

							</view>
						</view>
						<view class="status">
							待发货
						</view>
					</view>
					<view class="box">
						<view class="img" :style="{ backgroundImage: 'url(' + item.img + ')' }">
							<image style="width: 100%;height: 100%;"
								:src="img+ item.orderInfo.products.images[Math.ceil(Math.random() * 3)]" mode="">
							</image>
						</view>
						<view class="info">
							<view class="name">
								{{item.orderInfo.products.content}} {{item.orderInfo.products.shorttitle}}
							</view>
							<view class="package">
								套餐：{{item.package}}
							</view>
							<view class="lease">
								租期：{{item.pay_time}}-{{item.restitution}}
							</view>
							<view class="num">
								数量{{item.num}}
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="rent">
							共12期&emsp;总租金:<span style="color: black;">￥</span><span
								class="text">{{item.orderInfo.products.deposit}}</span>
						</view>
						<view class="btnBox">
							<view class="payMent">
								<u-button class="payMent-btn" type="primary" color="#FCE347" text="确定"></u-button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		order_list
	} from "../../../api/api.js"
	import navgatsVue from '../../../common/navgats/navgats.vue';
	export default {
		data() {
			return {
				navigationMsg: {
					title: "订单列表",
					bgColor: "white"
				},
				img: "https://api.jingkakeji.com",
				//tab默认索引
				tabCurrentIndex: 0,
				tabList: [{
					name: '全部',
				}, {
					name: '待付款',
				}, {
					name: '待发货'
				}, {
					name: '待收货'
				}, {
					name: '待归还'
				}, {
					name: '归还中'
				}],
				orderList: [],

			}
		},
		components: {
			navgatsVue
		},
		onLoad(options) {
			this.tabCurrentIndex = options.index;
			// this.order_lists()
		},
		onShow() {
			this.order_lists()
		},
		methods: {
			xiangqings(index) {
				console.log(this.orderList[index].orderInfo.orders_order_id)
				uni.navigateTo({
					url: `/pages/mys/buyout/buyout?ids=${this.orderList[index].orderInfo.orders_order_id}`
				})
			},
			async order_lists() {
				let res = await order_list()
				if (res.data.code == 1) {
					console.log(res.data.data.data, "获取订单列表")
					this.orderList = res.data.data.data

				}
			},
			//点击tab
			changeTab(index) {
				// console.log(index);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-order-page {
		width: 100vw;
		height: 100vh;

		.main {
			width: 100%;
			height: calc(100vh - 280rpx);
			background-color: #f6f6f6;
			overflow-y: scroll;
			display: flex;
			flex-direction: column;
			align-items: center;

			.orderList {
				width: 95%;
				padding-top: 20rpx;

				.orderList-item {
					width: 100%;
					height: 600rpx;
					background-color: white;
					margin-top: 20rpx;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.header {
						width: 95%;
						height: 100rpx;
						border-bottom: 1px solid #ccc;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.shop {
							display: flex;
							align-items: center;
							justify-content: space-between;

							.shopIcon {
								width: 30rpx;
								height: 30rpx;
								background-color: red;
							}

							.shopText {
								font-size: 34rpx;
								margin: 0px 20rpx;
							}

							.right {
								width: 25rpx;
								height: 25rpx;
								background-image: url("/static/my/right_ccc.svg");
								background-size: contain;
							}
						}

						.status {}
					}

					.box {
						width: 95%;
						height: 280rpx;
						border-bottom: 1px solid #ccc;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.img {
							width: 150rpx;
							height: 150rpx;
							background-size: contain;
							background-position: center;
							background-repeat: no-repeat;
							// background-color: red;
						}

						.info {
							width: 480rpx;
							height: 220rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;

							.name {
								width: 440rpx;
								font-size: 30rpx;
								font-weight: bold;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.package,
							.lease,
							.num {
								font-size: 28rpx;
								color: #989898;
							}
						}
					}

					.footer {
						width: 95%;
						height: 200rpx;

						.rent {
							height: 80rpx;
							text-align: right;
							line-height: 80rpx;
							font-size: 26rpx;
							color: #989898;
							margin-top: 10rpx;

							.text {
								color: black;
								font-weight: bold;
								font-size: 32rpx;
							}
						}

						.btnBox {
							width: 100%;
							display: flex;
							justify-content: right;
							margin-top: 10rpx;

							.payMent {
								width: 200rpx;
								height: 70rpx;
								border-radius: 40rpx;
								overflow: hidden;


								.payMent-btn {
									width: 200rpx;
									height: 70rpx;
									color: black !important;
								}
							}
						}
					}
				}
			}
		}
	}
</style>